<template>
  <v-navigation-drawer v-model="drawer" app color="#000000" mini-variant mini-variant-width="110">
      <v-avatar class="d-block text-center mx-auto mt-4 mb-10" size="80">
          <v-btn class="ma-2" outlined fab color="white">
              <v-icon x-large>mdi-basket</v-icon>
          </v-btn>
      </v-avatar>
      <v-card flat color="#151515" class="rounded-xl mx-4 py-10">
          <v-list flat dark>
              <v-list-item-group v-model="selectItem">
                  <v-list-item v-for="(item,i) in items" :key="i" active-class="border" v-slot="{ active }" :ripple="false">
                      <v-list-item-content>
                          <v-icon v-text="item.icons" :color="active ? 'white' :'grey lighten-1'"></v-icon>
                      </v-list-item-content>
                  </v-list-item>
              </v-list-item-group>
          </v-list>
      </v-card>
    <div style="position:absolute; bottom:20px; margin-left:auto; margin-right:auto; left:0; right:0; text-align:center;">
        <v-avatar size="40">
            <v-img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.yVEKxwbXhm2a_R9lrotYYQAAAA?w=164&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"></v-img>
        </v-avatar>
    </div>
  </v-navigation-drawer>
</template>

<script>
export default {
    data:()=>({
        selectItem:0,
        items:[
            {icons:"mdi-home-outline"},
            {icons:"mdi-cart-outline"},
            {icons:"mdi-store-outline"},
            {icons:"mdi-calendar-outline"},
            {icons:"mdi-apps"},
        ]
        
    }),
    props:['drawer'],
    watch:{
        drawer(value){
            return value;
        }
    }
}
</script>

<style>
.border{
    margin: 0px 8px;
    background: #6f0dff;
    border-radius: 15px;
    text-decoration: none;
    width: 60px;
    height: 60px;
}
.v-list-item-group .v-list-item--active{
    color: white !important;
}

.v-list-item__content{
    padding: 20px 0 !important;
}

.image{
    border: 1px solid white;
}
</style>